<!-- pages/index/index.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<custom-navbar :title="titleNav" display="none" :showBack="false">
		</custom-navbar>
		<!-- 轮播图 -->
		<view class="swiper-wrapper">
			<u-swiper :list="swiperList" height="300rpx" keyName="banner_image" indicator indicatorMode="dot"
				imgMode="aspectFill" @click="toDetail"></u-swiper>
		</view>
		<!-- 纵向滚动公告 -->
		<view class="notice-wrapper">
			<swiper vertical circular autoplay interval="3000" duration="500" class="notice-swiper">
				<swiper-item class="swiper-item" v-for="(item, index) in notices" :key="index" @click="toNotice(item.id)">
					<image src="/static/index_slices/notice.png"></image>
					<view class="notice-item">{{ item.title }}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 订单专区 -->
		<view class="section-wrapper">
			<view class="section-head">
				<view class="title">热门<text>商品</text></view>
				<view class="more" @click="getMore(1)">更多 ></view>
			</view>
			<up-waterfall v-model="orderList" :col="2">
				<template v-slot:left="{ leftList }">
					<goods-card v-for="(item, index) in leftList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
				<template v-slot:right="{ rightList }">
					<goods-card v-for="(item, index) in rightList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
			</up-waterfall>
		</view>

		<!-- 消费专区 -->
		<view class="section-wrapper">
			<view class="section-head">
				<view class="title">折扣<text>专区</text></view>
				<view class="more" @click="getMore(2)">更多 ></view>
			</view>
			<up-waterfall v-model="consumeList" :col="2">
				<template v-slot:left="{ leftList }">
					<goods-card v-for="(item, index) in leftList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
				<template v-slot:right="{ rightList }">
					<goods-card v-for="(item, index) in rightList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
			</up-waterfall>
		</view>
		<!-- 生活分类 -->
		<view class="section-wrapper">
			<view class="section-head">
				<view class="title">生活<text>分类</text></view>
				<view class="more" @click="getMore(4)">更多 ></view>
			</view>
			<view v-if="lifeList.length > 0">
			<up-waterfall v-model="lifeList" :col="2">
				<template v-slot:left="{ leftList }">
					<goods-card v-for="(item, index) in leftList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
				<template v-slot:right="{ rightList }">
					<goods-card v-for="(item, index) in rightList" :key="item.id" :data="item" :is-special="index < 2"
						@click="goDetails(item.id)" />
				</template>
			</up-waterfall>
			</view>
			<view v-else class="not-data">
				<view class="p">暂无数据</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<!-- <custom-tabbar :current="0" /> -->
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import CustomTabbar from '@/components/CustomTabbar.vue'
	import GoodsCard from '@/components/GoodsCard.vue'
	import CustomNavbar from '../../components/CustomNavbar.vue'
	const swiperList = ref([])
	const orderList = ref([])
	const consumeList = ref([])
	const lifeList = ref([])
	const logo = ref()
	const title = ref('宫溥堂')
	const titleNav = ref()
	// 公告数据
	const notices = ref([])
	uni.$api.common.getIndex().then(res => {
		logo.value = res.data.logo;
		title.value = res.data.site_name;
		titleNav.value = `<image style="width:25px;margin-right: 10px;" src="${res.data.logo}"></image>${res.data.site_name}`
		//公告数据
		notices.value = res.data.articleList;
		// 轮播图数据
		swiperList.value = res.data.bannerList; // 订单专区数据
		orderList.value = res.data.goodsList1.map((order, i) => ({
			id: order.id,
			title: order.goods_name,
			price: `￥${order.goods_price.toFixed(1)}`,
			oldPrice: `￥${order.market_price.toFixed(1)}`,
			sales: `已售${order.sales.toFixed(0)}`,
			image: order.goods_image
		}));
		// 消费专区数据
		consumeList.value = res.data.goodsList2.map((order, i) => ({
			id: order.id,
			title: order.goods_name,
			price: `￥${order.goods_price.toFixed(1)}`,
			oldPrice: `￥${order.market_price.toFixed(1)}`,
			sales: `已售${order.sales.toFixed(0)}`,
			image: order.goods_image
		}))
		// 生活分类数据
		lifeList.value = res.data.goodsList3.map((order, i) => ({
			id: order.id,
			title: order.goods_name,
			price: `￥${order.goods_price.toFixed(1)}`,
			oldPrice: `￥${order.market_price.toFixed(1)}`,
			sales: `已售${order.sales.toFixed(0)}`,
			image: order.goods_image
		}))
	})
	// 跳转banner详情
	const toDetail = (index) => {
		uni.navigateTo({
			url: swiperList.value[index].banner_url // 路径格式：/子包root/页面路径
		});
	}

	//跳转公告详情
	const toNotice = (id) => {
		uni.navigateTo({
			url: `/pages/index/notice?id=${id}`
		})
	}
	// 跳转更多
	const getMore = (type) => {
		uni.navigateTo({
			url: '/goodsPages/pages/goods/order?type=' + type // 路径格式：/子包root/页面路径
		});
	}
	// 跳转商品详情
	const goDetails = (id) => {
		uni.navigateTo({
			url: '/goodsPages/pages/goods/goods?id=' + id // 路径格式：/子包root/页面路径
		});
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		padding-bottom: 180rpx;
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 88rpx;
		/* #ifdef APP-PLUS */
		padding-top: calc(68px + constant(safe-area-inset-top));
		padding-top: calc(68px + env(safe-area-inset-top));
		/* #endif */
		/* 导航栏高度 */
	}

	.swiper-wrapper,
	.section-wrapper {
		padding: 0 30rpx;
	}

	// 公告
	.notice-wrapper {
		margin: 23rpx 30rpx 0;
		background: #fff;
		border-radius: 18rpx;

		.notice-swiper {
			height: 100rpx;

			.swiper-item {
				display: flex;
				align-items: center;

				image {
					width: 81rpx;
					height: 42rpx;
					margin-left: 21rpx;
				}

				.notice-item {
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 9rpx;
					color: #222222;
					font-weight: bold;
					font-size: 28rpx;
					// @include u-ellipsis;

				}
			}

		}
	}

	// 专区
	.section-head {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
		padding-top: 51rpx;
		padding-bottom: 30rpx;

		text {
			color: #FF413B;
		}

		.more {
			color: #999999;
			font-size: 24rpx;
			font-weight: normal;
		}
	}
		.not-data{
			text-align: center;
			.p{
				padding: 50rpx;
				font-size: 29rpx;
				color: #999;
			}
		}
</style>